<script setup>
import { ref, reactive, getCurrentInstance, watch, computed, onMounted  } from "vue"

let propsData = defineProps({
  list: {
    type: Array,
    default: []
  },
  stateList: {
    type: Array,
    default: []
  },
  sliderTime: {
    type: Number,
    default: 24
  },
  rowHeight: {
    type: Number,
    default: 40
  },
  labelWidth: {
    type: Number,
    default: 140
  }
})
let emit = defineEmits('itemClick');

watch(() => propsData.sliderTime, (val) => {
  rulerScaleWidth.value = (rulerDomWidth.value / val).toFixed(2);
})

watch(() => propsData.list, (val) => {
  init();
})

onMounted(()=> {
  // init();
})

let rulerBox = ref(null);   // 刻度尺DOM
let rigidContentScroll = ref(null);   // 下面内容的DOM
let rulerDomWidth = ref(0);   // 刻度尺DOM的宽度
let rulerScaleWidth = ref(0);   // 一刻度的宽度
let newList = ref([]);   // 处理的数据

let init = () => {
  rulerDomWidth.value = rulerBox.value.clientWidth;
  rulerScaleWidth.value = (rulerDomWidth.value / propsData.sliderTime).toFixed(2);

  rulerBox.value.addEventListener("scroll", function (e) {
    rigidContentScroll.value.scrollLeft = e.target.scrollLeft;
  });
  rigidContentScroll.value.addEventListener("scroll", function (e) {
    rulerBox.value.scrollLeft = e.target.scrollLeft;
  });
  let arr = [];
  propsData.list.forEach(i => {
    let alarmList = i.alarmList.map(x => {
      let stateItem = propsData.stateList.find(j => !j.label.indexOf(x.alarmTypeName)) || {};
      let obj = {...x, ...stateItem};
      let arrStart = obj.startTime.split(":");
      let startTotal = Number(arrStart[0]) * 60 + Number(arrStart[1]);
      obj['multiple'] = (startTotal / 60).toFixed(2)
      if (obj.endTime) {
        let arrEnd = obj.endTime.split(":");
        let endTotal = Number(arrEnd[0]) * 60 + Number(arrEnd[1]);
        obj['multipleWidth'] = ((endTotal - startTotal) / 60).toFixed(2);
      }
      return obj
    })
    i['alarmList'] = alarmList;
    arr.push(i)
  });
  newList.value = arr;
}

function onItemClick(alarmItem, aIndex, item){
  emit('itemClick', alarmItem, aIndex, item);
}

</script>
<template>
  <div class="rigid_pic">
    <!-- <div v-for="i in list">11 {{ i }}</div> -->
    <div class="rigid_pic_top">
      <div :style="{width: labelWidth + 'px'}"></div>
      <div class="rigid_ruler" ref="rulerBox">
        <div class="very_wide" :style="{width: rulerScaleWidth * 24  + 'px'}">
          <div class="rigid_scale_name flex_align_items">
            <div :style="{width: rulerScaleWidth  + 'px'}" v-for="item in 24" :key="item"><span v-if="(item + '').length == 1">0</span>{{ item - 1 }}:00</div>
          </div>
          <div class="rigid_scale flex_align_items">
            <div class="rigid_scale_item" :style="{width: rulerScaleWidth + 'px'}" v-for="item in 24" :key="item">
              <div class="scale_long"></div>
              <div class="scale_short" v-for="i in 9" :key="i"></div>
              <div class="scale_long" style="width: 1px;" v-if="item == 24"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="rigid_content">
      <div class="rigid_col_label" :style="{width: labelWidth + 'px'}">
        <div class="rigid_label" :style="{height: rowHeight + 'px', lineHeight: rowHeight + 'px'}" v-for="(item, index) in newList" :key="index">{{item.label}}</div>
      </div>
      <div class="rigid_col_content" ref="rigidContentScroll">
        <div class="rigid_item_content" :style="{height: rowHeight + 'px',width: (rulerScaleWidth * 24 + 10)  + 'px'}" v-for="(item, index) in newList" :key="index">
          <div class="rigid_video_item" v-for="(alarmItem, aIndex) in item.alarmList" :key="alarmItem.id" @click="onItemClick(alarmItem, aIndex, item)" :style="{
            width: (rulerScaleWidth * (alarmItem?.multipleWidth || 0)) + 'px',
            backgroundColor: alarmItem.backgroundColor, 
            left: (rulerScaleWidth * alarmItem.multiple) + 'px'
            }">
            <img :src="alarmItem.icon" alt="">
          </div>
          <!-- :width="400"  -->
            <!-- @show="onItemClick(alarmItem, aIndex, item)" -->
          <!-- <el-popover 
            placement="top" 
            trigger="click" 
            v-for="(alarmItem, aIndex) in item.alarmList" 
            :key="aIndex"
            >
            <template #reference>
              <div class="rigid_video_item" @click="onItemClick(alarmItem, aIndex, item)" :style="{
                width: (rulerScaleWidth * (alarmItem.multipleWidth || 0)) + 'px',
                backgroundColor: alarmItem.backgroundColor, 
                left: (rulerScaleWidth * alarmItem.multiple) + 'px'
                }">
                <img :src="alarmItem.icon" alt="">
              </div>
            </template>
            <slot :data="alarmItem"></slot>
          </el-popover> -->
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
@scale-color: #868A8D; // 刻度 颜色
@top-background-color: #eaeef4; // 刻度尺 背景颜色
@content-background-color: #f4f6f8; // 内容 背景颜色

.rigid_pic{
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 6px;
  .rigid_pic_top{
    width: 100%;
    display: flex;
    padding-right: 10px;
    background-color: @top-background-color;
    border-radius: 6px 6px 0 0;
  }
  
  .rigid_ruler::-webkit-scrollbar { width: 0 !important;height: 0 !important; }
  .rigid_ruler::-webkit-scrollbar-thumb { width: 0 !important;height: 0 !important; }
  .rigid_ruler::-webkit-scrollbar-track { width: 0 !important;height: 0 !important;}
  .rigid_ruler{
    flex: 1;
    height: 30px;
    overflow: auto;
    .very_wide{
      height: 100%;
      overflow: auto;
    }
    .rigid_scale_name{
      width: 100%;
      height: 22px;
      font-size: 12px;
      line-height: 22px;
      user-select: none;
    }
    .rigid_scale{
      width: 100%;
      height: 8px;
      .rigid_scale_item{
        height: 100%;
        display: flex;
        flex-direction: row;
      }
      .scale_long{
        width: 10%;
        height: 100%;
        position: relative;
      }
      .scale_long::before{
        content: "";
        display: block;
        width: 1px;
        height: 6px;
        background-color: @scale-color;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .scale_short{
        width: 10%;
        height: 100%;
        position: relative;
      }
      .scale_short::before{
        content: "";
        display: block;
        width: 1px;
        height: 3px;
        background-color: @scale-color;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .rigid_content{
    overflow: auto;
    display: flex;
    background-color: @content-background-color;
    .rigid_col_label{
      .rigid_label{
        background-color: @content-background-color;
        padding: 0 10px 0 20px;
      }
    }
    
    .rigid_col_content{
      overflow: auto;
      flex: 1;
      .rigid_item_content:nth-child(2n){
        background-color: @top-background-color;
      }
      .rigid_item_content{
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        .rigid_video_item{
          cursor: pointer;
          height: 26px;
          min-width: 32px;
          border-radius: 6px;
          margin-right: 10px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          img{
            width: 20px;
            height: 20px;
            margin: 3px 6px;
          }
        }
      }

    }
    
    .rigid_item_content::-webkit-scrollbar { width: 0 !important;height: 0 !important; }
    .rigid_item_content::-webkit-scrollbar-thumb { width: 0 !important;height: 0 !important; }
    .rigid_item_content::-webkit-scrollbar-track { width: 0 !important;height: 0 !important;}
  }
  .flex_align_items{
    display: flex;
    align-items: center;
  }
}
</style>